<script setup>
const files = import.meta.globEager('@/service/api/sys/**/*.{js,ts}') // 找出所有接口请求
const emit = defineEmits()
let modules = {} // 所有接口方法
Object.entries(files).forEach(([k, v]) => {
  console.log(k)
  Object.assign(modules, v)
})

const pagination_config = ref({
  total: 0,
  page: 1,
  size: 10
})
const props = defineProps({
  // 默认表格配置项
  table_config: {
    type: Object,
    default: () => ({
      thead: [], // 状态项列表
      filter_Config: {}, // 筛选条件
      SpecialField: [], // 自定义特殊字段集合,在此添加内容,得在template内添加插槽写自定义内容
      otherOptions: {}, // 表格其他属性
      paging: false, // 是否分页
      num: true, // 是否显示序号
      select: true, // 是否有多选
      expend: false, // 是否是展开行
      isoperate: true, // 是否有操作 用#operate插槽来控制
      operatewidth: '', // 操作列表宽度
      ispagination: false, // 是否有分页器
      methodName: '' // 接口名
    })
  }
})

const table_data = ref([]) // 表格数据源
const table_show = ref([
  {
    name: '姓名',
    description: '详情',
    menuNameList: '菜单列表'
  }
]) // 表格展示数据集合
const isLoading = ref(true) // 是否首屏加载
const parentObj = ref(null) // table表格个的父级元素ref
const maxHeight = ref(0) // 设置table表格的高度适应

watch(() => props.table_config.filter_Config, throttle(getTable, 500), {
  deep: true
})

// 防抖
function throttle(fn, t) {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(function () {
        fn()
        // 清空定时器
        timer = null
      }, t)
    }
  }
}

// 获取表格数据
async function getTable() {
  let config = { ...props.table_config.filter_Config }
  if (props.table_config.paging) {
    config.page = pagination_config.value.page
    config.size = pagination_config.value.size
  }
  // 当前是否是首屏加载或者是分页类型则请求数据
  if (props.table_config.paging || isLoading.value) {
    const res = await modules[props.table_config.methodName](config)
    pagination_config.value.total = res.data.total || 0
    table_data.value = res.data.records || res.data
    table_show.value = table_data.value
    isLoading.value = false // 把首屏加载修改
    console.log(res)
  } else {
    let isEmpty = true // 判断筛选条件是否有内容
    const objToArr = new Map(Object.entries(props.table_config.filter_Config)) // 筛选条件对象转化为数组
    // 判断是否为空
    objToArr.forEach((value) => {
      if (value.length <= 0 || value === 0) {
        isEmpty = false
      }
    })
    // 不为空则递归筛选数据
    if (isEmpty) {
      const exit = recursion([...table_data.value], objToArr)
      table_show.value = exit !== undefined ? [exit] : []
    } else {
      // 为空则赋值数据源表格呢绒
      table_show.value = [...table_data.value]
    }
  }
}

// 递归筛选数据
function recursion(arr, fields) {
  for (let o of arr || []) {
    let isBoolean = true
    fields.forEach((value, label) => {
      if (o[label] !== value) {
        isBoolean = false
      }
    })
    if (isBoolean) return o
    const o_ = recursion(
      o[props.table_config.otherOptions.treeProps.children],
      fields
    )
    if (o_) return o_
  }
}

// 每页数量改变
function handSizeChange(value) {
  pagination_config.value.size = value
  getTable()
}

// 当前页数改变
function handCurrentChange(value) {
  pagination_config.value.page = value
  getTable()
}

// 返回序号用法
function indexMethod(key) {
  return (
    (pagination_config.value.page - 1) * pagination_config.value.size +
    (key + 1)
  )
}

// 多选框内容改变
function selectChange(data) {
  emit('selectChange', data)
}

// 更新高度
function UpdateHeight() {
  maxHeight.value = props.table_config.ispagination
    ? parentObj.value.offsetHeight - 44
    : parentObj.value.offsetHeight
}

// 页面初始化生命周期函数
onMounted(() => {
  // getTable()
  window.addEventListener('resize', UpdateHeight())
})

// 暴露出去更新图表视图方法
defineExpose({
  getTable,
  pagination_config
})
/*
selectChange => 多选内容改变函数
getTable => 重新搜索数据
SizeChange => 分页器每页条数改变自定义函数
CurrentChange => 当前页数改变自定义函数
operate为操作的插槽
*/
</script>

<template>
  <div ref="parentObj" class="h-full w-full">
    <el-table
      :row-key="(row) => row.id"
      v-bind="table_config.otherOptions"
      :max-height="maxHeight"
      :height="maxHeight"
      :header-cell-style="{
        background: 'transparent !important',
        'font-size': '14px',
        'font-weight': '400'
      }"
      :data="table_show"
      @selection-change="selectChange"
      class="TableStyle"
    >
      <!-- 是否显示多选 -->
      <el-table-column
        reserve-selection
        v-if="props.table_config.select"
        type="selection"
        width="55"
        align="center"
      />
      <!-- 是否显示扩展列 -->
      <el-table-column v-if="props.table_config.expend" type="expand">
        <template v-slot="{ row }">
          <slot name="expend" :row="row" />
        </template>
      </el-table-column>
      <!-- 是否显示序号 -->
      <el-table-column
        v-if="props.table_config.num"
        label="序号"
        :index="indexMethod"
        type="index"
        width="70"
        align="center"
      />
      <!-- 状态项 -->
      <template v-for="item in props.table_config.thead" :key="item.prop">
        <el-table-column
          v-if="props.table_config.SpecialField.includes(item.prop)"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
          <template v-slot="{ row }">
            <slot :name="item.prop" :row="row" />
          </template>
        </el-table-column>
        <!-- 正常显示 -->
        <el-table-column
          v-else
          align="center"
          :label="item.label"
          :width="item.width"
          :prop="item.prop"
          v-bind="item.otherOptions"
        />
      </template>
      <!-- 操作列 -->
      <el-table-column
        v-if="props.table_config.isoperate"
        :width="props.table_config.operatewidth || '50px'"
        label="操作"
        align="center"
      >
        <template v-slot="{ row }">
          <slot name="operate" :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="props.table_config.ispagination"
      class="my-2.5 flex items-center justify-center"
      v-model:current-page="pagination_config.page"
      v-model:page-size="pagination_config.size"
      :page-sizes="[10, 20, 50, 100]"
      small
      background
      layout="total,  prev, pager, next, sizes, jumper"
      :total="pagination_config.total"
      @size-change="handSizeChange"
      @current-change="handCurrentChange"
    />
  </div>
</template>

<style scoped>
/* 斑马纹颜色设置 */
:deep(.el-table tr) {
  background-color: #e4e4e4;
}
:deep(.el-table__inner-wrapper::before) {
  display: none;
  background-color: #173d91;
}
/* 修改表格右侧和底侧的border */
:deep(
    .multiple-table .el-table--border:after,
    .el-table--group:after,
    .el-table:before
  ) {
  background-color: transparent;
}
/* 修改表格上侧和左侧的border */
:deep(.multiple-table .el-table--border, .el-table--group) {
  border-color: transparent;
}
.TableStyle {
  background-color: transparent !important;
}
.TableStyle ::v-deep(.el-table th.el-table__cell),
::v-deep(.el-table th),
::v-deep(.el-table tr) {
  background-color: transparent !important;
}
</style>
